<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.css">
</head>
<body>
  <!-- 
    1 输入用户名密码点击发布可以添加评论
    2 点击评论上的删除按钮可以删除评论
  -->
  <div class="container" id="app">
    <div class="form-group">
      <input type="text" class="form-control" v-model="comment.username">
    </div>
    <div class="form-group">
      <textarea class="form-control" v-model="comment.content"></textarea>
    </div>
    <div class="form-group clearfix">
      <button class="btn btn-success pull-right" @click="send">发布</button>
    </div>
    <hr>
    <div v-if="msg" :class="['alert', {'alert-danger': alert_class === 'danger'}, {'alert-success': alert_class === 'success'}]" >{{msg}}</div>
    <div class="list-group" v-if="comments.length">
      <a href="javascript:;" class="list-group-item" v-for="(comment, index) in comments" :key="index">
        <button type="button" class="close" @click="del(index)"><span>&times;</span></button>
        <h4 class="list-group-item-heading">{{comment.username}}</h4>
        <p class="list-group-item-text">{{comment.content}}</p>
        <p class="text-muted text-right">{{formatTime(comment.postDate)}}</p>
      </a>
    </div>
    <div class="list-group" v-else>
      <a href="#" class="list-group-item disabled">
        暂无评论
      </a>
    </div>
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: '',
        alert_class: 'danger',
        t: null, 
        // 写一个数据绑定表单元素
        comment: {
          username: '',
          content: ''
        },
        // 模拟一个数据里面包含评论内容
        comments: []
      },
      methods: {
        send () {
          // 判断是否为空
          if(this.comment.username && this.comment.content) { 
            // 如果发送成功就把username存到localStorage中
            localStorage.setItem('username', this.comment.username)

            // 把评论时间添加到comment
            this.comment.postDate = Date.now()

            // 把comment放在comments中 (注意需要把对象拷贝一份再添加)
            this.comments.unshift(Object.assign({}, this.comment))
            // 把评论内容清空
            this.comment.content = ""
            this.msg = "评论成功"
            this.alert_class = 'success'
            clearTimeout(this.t)
            this.t = setTimeout(() => {
              this.msg = ""
            }, 2000)
            // 新增一条就直接把comments覆盖到原有位置
            localStorage.setItem('comments', JSON.stringify(this.comments))

          } else {
            this.msg = "请输入用户名或评论内容"
            this.alert_class = 'danger'
          }
        },
        del (index) {
          this.comments.splice(index, 1)
          // 删除一条就直接把comments覆盖到原有位置
          localStorage.setItem('comments', JSON.stringify(this.comments))
        },
        formatTime (time) {
          const 
            d = new Date(time),
            y = d.getFullYear(),
            m = d.getMonth() + 1,
            day = d.getDate(),
            h = d.getHours(),
            min = d.getMinutes(),
            s = d.getSeconds()
          
          return `${y}/${m}/${day} ${h}:${min}:${s}`
        }
      },
      created () {
        const username = localStorage.getItem('username')
        if (username) {
          this.comment.username = username
        }

        const comments = localStorage.getItem('comments')
        if(comments) {
          this.comments = JSON.parse(comments)
        }
      }
    })
  </script>
</body>
</html>